import React from 'react'
import './index.less'
import { Button, Card, Radio } from "antd";
import '../ui.less'
export default class Buttons extends React.Component {
    state = {
        loading: true,
        size: 'default'
    }
    hancleCloseLoading = () => {
        this.setState({
            loading: false
        })
    }
    handleChange = (e) => {
        this.setState({
            size: e.target.value
        })
    }
    render() {
        return (
            <div className="home-wrap">
                <Card title="基础按钮" className="card-warp">
                    <Button type="primary">Primary</Button>
                    <Button>Default</Button>
                    <Button type="dashed">Dashed</Button>
                    <Button type="danger">Danger</Button>
                    <Button type="link">Link</Button>
                    <Button disabled>Link</Button>
                </Card>
                <Card title="图形按钮" className="card-warp">
                    <Button type="primary" icon="plus">创建</Button>
                    <Button type="" icon="edit">编辑</Button>
                    <Button type="danger" icon="delete">删除</Button>
                    <Button icon="search" shape="circle"></Button>
                    <Button type="primary" icon="download">下载</Button>
                </Card>
                <Card title="loading按钮" className="card-warp">
                    <Button type="primary" icon="plus" loading={this.state.loading}>创建</Button>
                    <Button icon="search" shape="circle" loading={this.state.loading}></Button>
                    <Button type="primary" icon="download" loading={this.state.loading}>下载</Button>
                    <Button type="primary" icon="" onClick={this.hancleCloseLoading}>关闭</Button>
                </Card>
                <Card title="按钮组">
                    <Button.Group>
                        <Button className="ButtonGroup" type="primary" icon="left">返回</Button>
                        <Button className="ButtonGroup" type="primary" icon="right">前进</Button>
                    </Button.Group>
                </Card>
                <Card title="按钮尺寸" className="card-warp">

                    <Radio.Group value={this.state.size} onChange={this.handleChange}>
                        <Radio value="small">小</Radio>
                        <Radio value="default">中</Radio>
                        <Radio value="large">大</Radio>
                    </Radio.Group>
                    <Button type="primary" size={this.state.size}>Primary</Button>
                    <Button size={this.state.size}>Default</Button>
                    <Button type="dashed" size={this.state.size}>Dashed</Button>
                    <Button type="danger" size={this.state.size}>Danger</Button>
                    <Button type="link" size={this.state.size}>Link</Button>
                    <Button disabled size={this.state.size}>Link</Button>
                </Card>

            </div>
        )
    }
}